<template>
	<view class="pub-component" v-if="currShowModal">
		<view class="pub-modal">
			<view class="header">
				<text>请选择账单类型</text>
				<text class="iconfont icon-close" @click="handleClickClose"></text>
			</view>
			<view class="body">
				<view class="type-list">
					<text :class="[item.flag ? 'active': '']" v-for="item in typeList" :key="item.id" @click="handleClickSelectedType(item)">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent, ref, reactive, toRefs, watch} from 'vue'
	export default defineComponent({
		props: {
			payShowModal: {
				type: Boolean,
				default: false
			}
		},
		setup(props, context) {
			const state = reactive({
				currShowModal: false,
				typeList: [
					{id: '',name: '全部', flag: true},
					{id: '1',name: '支出', flag: false},
					{id: '2',name: '收入', flag: false}
				]
			})

			// 监听弹窗的状态
			watch(() => props.payShowModal, (newVal)=> {
				state.currShowModal = newVal
			})
			// 关闭弹窗
			const handleClickClose = () => {
				context.emit('closePay')
			}
			// 选中类型
			const handleClickSelectedType = (el) => {
				state.typeList.forEach(item => {
					if(el.id == item.id) {
						item.flag = true
					} else {
						item.flag = false
					}
				})
				context.emit('selectedPay', el)
			}
			
			return {
				...toRefs(state),
				handleClickClose,
				handleClickSelectedType
			}
		}
	})
</script>

<style scoped>
	.pub-component{
		position: fixed;
		top: 0px;
		left: 0px;
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.2);
	}
	.pub-modal{
		width: 100%;
		height: 60%;
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: 1s linear;
	}
	.pub-modal .header{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	.pub-modal .header text:nth-child(1) {
		font-size: 14px;
	}
	.pub-modal .header text:nth-child(2) {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 19px;
	}
	.body{
		padding: 10px;
		background: #eee;
	}
	.type-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.type-list text {
		width: 32%;
		margin-right: 6px;
		margin-bottom: 6px;
		padding: 8px 0px;
		color: #333;
		background: #FFF;
		font-size: 13px;
		text-align: center;
		border-radius: 4px;
	}
	.type-list text:nth-child(3n) {
		margin-right: 0px;
	}
	.type-list text.active{
		background: #038F42;
		color: #fff;
	}
</style>
